<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>缓动动画测试</title>
    <style>
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            box-sizing: border-box;
        }

        #wow {
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div id="wow" style="width:0;height: 0px;background-color: orangered;"></div>
    <div id="lol" style="font-size:16px;text-align: center;line-height: 1;">111</div>
    <script type="module">
        import Anikyu from '../src/anikyu.js';
        // import Anikyu from '../dist/anikyu.esm.js';

        // 混合随机函数
        let fnMix = {
            random: function () {
                return Math.random();
            }
        };
        Anikyu.mixEaseFn(fnMix);

        let el1 = document.getElementById('wow');

        let el2 = document.getElementById('lol');
        let el1AnimationQueue = [
            {
                delay: 500,
                duration: 400,
                easeType: 'bounceInOut',
                props: {
                    width: parseFloat(Anikyu.getStyle(el1, 'width')),
                    height: parseFloat(Anikyu.getStyle(el1, 'height'))
                },
            },
            {
                duration: 3000,
                easeType: 'random',
                props: {
                    width: 100,
                    height: 200
                },
                name: '测试阶段'
            },
            {
                delay: 300,
                duration: 800,
                easeType: 'sinusoidalInOut',
                props: {
                    width: 200,
                    height: 200
                }
            }, {
                delay: 400,
                duration: 2000,
                easeType: 'elasticOut',
                props: {
                    width: 10,
                    height: 500
                },
            }, {
                delay: 2000,
                duration: 4000,
                easeType: '',
                props: {
                    width: 500,
                    height: 10
                },
            }, {
                delay: 1,
                duration: 3200,
                easeType: 'bounceInOut',
                props: {
                    width: 400,
                    height: 500
                },
            }
        ]
        let zzz = new Anikyu(el2.style, [
            {
                duration: 400,
                props: {
                    fontSize: parseFloat(Anikyu.getStyle(el2, 'fontSize')),
                },
            },
            {
                delay: 2000,
                duration: 2000,
                step: 20,
                easeType: 'step',
                props: {
                    fontSize: 40
                }
            },
            {
                duration: 3000,
                easeType: 'bounceInOut',
                props: {
                    paddingTop: 80
                }
            },
            {
                name: 'final',
                delay: 2000,
                duration: 2000,
                step: 20,
                easeType: 'step',
                props: {
                    fontSize: 400,
                    lineHeight: 2
                }
            }
        ])

        zzz.addEventListener('finish', function (e) {
            console.log(e)
            if (e.detail.name !== 'final') return
            window.anikyuInstance = new Anikyu(el1.style, el1AnimationQueue, {
                // manualNext: true
            });
            window.anikyuInstance.addEventListener('animate', (e) => {
                if (e.detail.name) {
                    console.log(e.detail.value.width, e.target.width, e.detail.name, '正在进行')
                }
            })
            window.anikyuInstance.addEventListener('finish', (e) => {
                if (e.detail.name === '测试阶段') {
                    document.title = e.detail.name + ' 已完成'
                }
            })
        })

    </script>
</body>

</html>